import { useContext, useEffect, useRef, useState } from 'react'
import { SearchOutlined, ExclamationCircleOutlined } from '@ant-design/icons'
import axios from '@/http'
import { TMessage } from '@type'
import { Input, InputRef, message, Modal, Space, Table } from 'antd'
import { ColumnsType } from 'antd/lib/table'
import { formatTime, bound } from '@/util'
import Bread from '@/component/bread/bread'
import { AppContext } from '@/App'
const { confirm } = Modal
const Message = () => {
  const bread = ['留言', '留言管理']
  const {
    store: { status }
  } = useContext(AppContext)
  const [messageList, setMessageList] = useState<TMessage[]>([])
  const [messageAllList, setMessageAllList] = useState<TMessage[]>([])
  useEffect(() => {
    getMessageList()
  }, [])
  const columns: ColumnsType<TMessage> = [
    {
      title: 'Id',
      dataIndex: 'id',
      key: 'id'
    },
    {
      title: '用户名',
      dataIndex: 'username',
      key: 'username'
    },
    {
      title: '昵称',
      dataIndex: 'realname',
      key: 'realname'
    },
    {
      title: '内容',
      key: 'content',
      dataIndex: 'content'
    },
    {
      title: '发布时间',
      key: 'time',
      dataIndex: 'time',
      render: (_, { time }) => <span>{formatTime(time)}</span>
    },
    {
      title: '操作',
      key: 'action',
      render: (_, { id, username }) => (
        <Space size="middle">
          <a style={{ color: 'red' }} onClick={() => showDeleteConfirm(id, username)}>
            删除
          </a>
        </Space>
      )
    }
  ]
  const showDeleteConfirm = (id: number, username: string) => {
    confirm({
      title: '删除留言?',
      icon: <ExclamationCircleOutlined />,
      content: '你确定要删除此留言？',
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk() {
        startDel(id, username)
      }
    })
  }
  const startDel = (id: number, username: string) => {
    axios
      .post('/advice/del', {
        id,
        username,
        status
      })
      .then(res => {
        if (res.data.error === -1) {
          message.success('删除成功')
          getMessageList()
        }
      })
  }
  const getMessageList = () => {
    axios.get('/advice/search').then(({ data }) => {
      if (data.error === -1) {
        setMessageList(data.data)
        setMessageAllList(data.data)
      }
    })
  }
  const inputDom = useRef<InputRef>(null)
  const onChange = () => {
    bound(() => {
      const message = inputDom.current?.input?.value
      const filterMessage = message ? messageAllList.filter(item => item.content.indexOf(message) !== -1) : messageAllList
      setMessageList(filterMessage)
    })
  }
  return (
    <>
      <Bread bread={bread}></Bread>
      <Input
        onChange={onChange}
        ref={inputDom}
        style={{ width: '200px', float: 'right', marginBottom: '16px' }}
        placeholder="根据用户名称搜索"
        suffix={<SearchOutlined style={{ color: 'rgba(0,0,0,.45)' }} />}
      />
      <Table columns={columns} rowKey={record => record.id} dataSource={messageList} />
    </>
  )
}
export default Message
